import React, { Component } from 'react'
import { NavBar, Carousel, WingBlank, Flex } from 'antd-mobile';
import './index.scss'
import styles from './index.module.scss';
import SearchInput from '../searchInput/searchInput';
import axios from '../../utils/myaxios';
import { withRouter } from 'react-router-dom'

class index extends Component {
    state = {
        data: [],
        imgHeight: 176,
        catitems: [],
        productData: []
    }
    componentDidMount() {
        axios.get('home/swiperdata').then((res) => {
            this.setState({
                data: res
            })
        }).catch((err) => console.log(err));
        axios.get('home/catitems').then((res) => {
            this.setState({
                catitems: res
            })
        }
        )
        axios.get("/home/floordata").then(res => {
            this.setState({
                productData: res
            })
        })
    }
    // 轮播图点击事件
    swiperClick = (goods_id) => {
        this.props.history.push("/goodDetail/" + goods_id);
    };
    // 分类列表点击
    handleCatItemClick = () => {
        this.props.history.push('/category')
    }
    // 图片列表点击事件
    handleImgClick = () => {
        this.props.history.push("/goodList?"+"query=服装");
    }
    
    render() {
        return (
            <div>
                {/* 导航栏开始 */}
                <section>
                    <NavBar className={styles.header}>优购商城</NavBar>
                </section>
                {/* ---导航栏结束 */}

                {/* 搜索框开始 */}
                <section>
                    <SearchInput></SearchInput>
                </section>
                {/* ---搜索框结束 */}

                {/* 轮播图部分开始 */}
                <div className={styles.carousel}>
                    <WingBlank>
                        <Carousel autoplay = {true} infinite>
                            {this.state.data.map(val => (
                                <div
                                    key={val.goods_id}
                                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                    onClick={this.swiperClick.bind(this, val.goods_id)}
                                >
                                    <img
                                        src={val.image_src}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </div>
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>
                {/* ---轮播图部分结束 */}

                {/* 首页分类导航开始 */}
                <div className={styles.yg_index_catitems} >
                    <div className={styles.catitems_item}>
                        <Flex>
                            {
                                this.state.catitems.map(v => {
                                    return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                                        <img src={v.image_src} alt="" />
                                    </Flex.Item>
                                })
                            }
                        </Flex>
                    </div>
                </div>
                {/* ---首页分类导航结束 */}

                {/* 首页图片列表开始 */}
                <div className="yg-index-productData">
                    {
                        this.state.productData.map(v => {
                            return <div key={v.floor_title.image_src} className="productData-item">
                                {/* 标题开始 */}
                                <div className="product-title">
                                    <img src={v.floor_title.image_src} alt="" />
                                </div>
                                {/* 标题结束 */}
                                {/* 图片列表的开始 */}
                                <div className="product-image-list">
                                    {
                                        v.product_list.map(vv => {
                                            return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                                <img src={vv.image_src} alt="" />
                                            </div>
                                        })
                                    }
                                </div>
                                {/* 图片列表的结束 */}

                            </div>
                        })
                    }
                </div>
                {/* 首页图片列表结束 */}



            </div>
        )
    }
}

export default withRouter(index)
